<template>
	<view>
		<view class="bg u-margin-top-20" v-if="list.length">
			<view v-for="(item,index) in list " :key="index"
				:class="item.status==0?'base-coupons_gray':item.status==1?'base-coupons change':item.status==2?'base-coupons ':''"
				class="vouch shadow u-flex"  @click="lingqu(item)">
				<view  class="u-flex-3.8 u-text-center" style="color: #fff;">
					<view >
						<text>￥</text>
						<text style="font-size: 40rpx;">{{item.money}}</text>
					</view>
					<view class="u-margin-top-20">
					   满{{item.needMoney}}使用
					</view>
				</view>
				<view class="u-flex-5" style="padding-left: 60rpx;">
					<view style="font-weight: bold;font-size: 34rpx;">{{item.money}}元优惠券</view>
					<view style="color: #bebebe;margin: 20rpx 0;">说明:{{item.remark}}</view>
					<view class="u-text-right" >
						<u-button type="error" size="mini" @click="use(item)" shape="circle">使用</u-button>
					</view>
					
					<!-- <view style="color: #bebebe;"> 期限:{{item.price}}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			use(item){
				this.$emit("use",item)
			}
		}
		
	}
</script>

<style>
	.base-coupons {
		width: 620rpx;
		height: 200rpx;
	
		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #FF5D39 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #FF5D39 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,
	
			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		/* filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3)); */
		margin: auto;
	}
	
	.change {
		opacity: 0.4;
	}
	
	
	.base-coupons::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #FF5D39 10rpx, transparent 10rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #FF5D39 0rpx);
		background-size: 10rpx 30rpx;
	}
	
	.base-coupons_gray {
		width: 620rpx;
		height: 200rpx;
	
		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #C8C8C8 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #C8C8C8 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,
	
			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3));
		margin: auto;
	}
	
	
	.base-coupons_gray::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #C8C8C8 10rpx, transparent 0rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #C8C8C8 0rpx);
		background-size: 10rpx 30rpx;
	}
	
	
	.vouch {
		margin-top: 20rpx;
		
	}
</style>
